<template>
    <div class="container">
        <!-- 头部 -->
        <div class="headers">
            <div class="hicon">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="on">提交订单</div>
        </div>
        <!-- 收货地址 -->
        <div class="address">
            <div style="width:20%">
                <i class="el-icon-location-outline"></i>
            </div>
            <div style="width:90%">
                <div>收货人 手机号</div>
                <div>收货地址</div>
            </div>
            <div style="width:10%">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <!-- 送达时间 -->
        <div class="time">
            <div class="shi">
                <div>送达时间</div>
                <div>
                    12:00-13:00
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div class="shi">
                <div>
                    <img src="../../public/image/a01bf044b8a03f35aea21fa14151f94.jpg" width="100px" height="100px"></img>
                </div>
                <div>共2件</div>
            </div>
        </div>
        <!-- 价钱详情 -->
        <div class="money">
            <div class="xi">价格明细</div>
            <div class="price">
                <div>商品金额</div>
                <div>￥92.70</div>
            </div>
            <div class="price">
                <div>配送费</div>
                <div>￥0.00</div>
            </div>
            <div class="price">
                <div>优惠卷</div>
                <div>
                    共0张，0张可用
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div class="stotal">小计：<span style="color:red">￥92.70</span></div>
        </div>
        <!-- 保障 -->
        <div class="money">
            <div class="xi">安心保障</div>
            <div class="bao">
                <div>
                    <el-button type="success" icon="el-icon-alarm-clock" size="mini" circle></el-button>&emsp;缺重退款
                </div>
                <div style="font-size:10px;color:#666;margin-left:40px">如商品实际重量不足，按确重比例自动退款</div>
            </div>
            <div class="bao">
                <div>
                    <el-button type="success" icon="el-icon-alarm-clock" size="mini" circle></el-button>&emsp;超时补偿
                </div>
                <div style="font-size:10px;color:#666;margin-left:40px">超时10分钟赠送100积分</div>
            </div>
        </div>
        <!-- 支付 -->
        <div class="pay">
            <div class="go">￥39.80</div>
            <div class="go_pay">
                <el-button type="danger" round size="mini" @click="gopay">去结算</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {};
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {
        gopay(){
            this.$router.push("/pay")
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
    .container{
        background-image: linear-gradient(#00c264e4,rgb(225, 225, 225));
    }
    .headers{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .hicon{
        width: 20%;
    }
    .on{
        width: 60%;
    }
    .address{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        background-color: white;
        padding: 10px;
        border-radius: 10px;
    }
    .time{
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        background-color: white;
        padding: 10px;
        border-radius: 10px;
    }
    .shi{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
    }
    .money{
        width: 90%;
        background-color: white;
        border-radius: 10px;
        padding: 10px;
        margin: 0 auto;
        margin-top: 10px;
        font-size: 14px;
    }
    .price{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
    .xi{
        padding: 10px;
        border-bottom: 1px solid #ccc;
        color: #666;
    }
    .stotal{
        text-align: right;
        padding: 10px;
        border-top: 1px solid #ccc;
    }
    .bao{
        padding: 10px;
    }
    .pay{
        display: flex;
        justify-content: space-between;
        background-color: white;
        margin-top: 10px;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 100;
    }
    .go{
        padding: 10px;
        font-size: 20px;
        color: red;
    }
    .go_pay{
        padding: 10px;
    }
</style>
